 <style type="text/css">
    html,body{
            width:100%;
            height:100%;
            overflow:hidden;
            padding: 0;
            margin: 0;
          }
     p,h3{border: 0 none;
            font: inherit;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
          }
    p{ margin-bottom: 1em ; font-size: 12px;
          } 
    h3 {
    font-size: 108%;margin: 1em 0; font-weight:blod;
          }
    #mainwrapper {  
      font: 10pt normal Arial, sans-serif;  
      height: auto;  
      margin: 80px auto 0 auto;  
      text-align: center;  
      width: 660px;  
         }  
    #mainwrapper .box {  
        border: 5px solid #fff;  
        cursor: pointer;  
        height: 500px;  
        float: left;  
        margin: 5px;  
        position: relative;  
        overflow: hidden;  
        width: 500px;  
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
        -moz-box-shadow: 1px 1px 1px 1px #ccc;  
        box-shadow: 1px 1px 1px 1px #ccc;  
        }  
      
    #mainwrapper .box img {  
        position: absolute;  
        left: 0;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
        }  
    #mainwrapper .box .caption {  
        background-color: rgba(0,0,0,0.8);  
        position: absolute;  
        color: #fff;  
        z-index: 100;  
        -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  
        left: 0;  
       }  
      #mainwrapper .box .slide-caption {  
        font-size: 40px;
        width: 470px;  
        height: 470px;  
        text-align: left;  
        padding: 15px;  
        left: 500px;  
       }
       #mainwrapper .box:hover .slide-caption {  
      background-color: rgba(0,0,0,1);  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      opacity: 1;  
      transform: translateX(-100%);  
      }  

    #mainwrapper .box:hover img#image-1 {  
      -moz-transform: translateX(-100%);  
      -o-transform: translateX(-100%);  
      -webkit-transform: translateX(-100%);  
      transform: translateX(-100%);  
     }  
     ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li{
    float:left;
    }
    a:link,a:visited{
    display:block;
    font-weight:bold;
    color:#996600;
    background-color:#FFFFCC;
    text-align:center;
    padding:10px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active{
    background-color:#99CC66;
}

